<template>
  <div>
    <div class="flex items-center">
      <this-search ref="search" @on-search="fetch(1)" @on-add="onAdd" />
    </div>
    <el-table
      :height="tableHeight"
      class="mt-2"
      stripe
      v-loading="loading"
      :data="rows"
    >
      <!-- <el-table-column prop="id" label="ID" width="180"> </el-table-column> -->

      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="name" label="群组名称" width="240">
      </el-table-column>
      <el-table-column prop="gid" label="群组ID"> </el-table-column>
      <el-table-column prop="portrait" label="头像">
        <template slot-scope="{ row }">
          <img :src="row.portrait" class="w-8 h-8 rounded-full" />
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="群主ID"> </el-table-column>
      <el-table-column prop="owner" label="群主昵称"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="{ row }">
          {{ row.createTime | time2str }}
        </template>
      </el-table-column>
      <el-table-column prop="memberCount" label="人数"> </el-table-column>

      <el-table-column label="操作" width="160">
        <template slot-scope="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link"> 更多 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="viewMsg(row)"
                >查看消息</el-dropdown-item
              >
              <el-dropdown-item @click.native="showMembers(row)"
                >查看群成员</el-dropdown-item
              >
              <el-dropdown-item @click.native="addMembers(row)"
                >添加群成员</el-dropdown-item
              >
              <el-dropdown-item @click.native="confirmDel(row)"
                >解散</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="toggoleState(row, { type: 3, value: 0 })"
                v-show="row.mute === 1"
                >取消禁言</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="toggoleState(row, { type: 3, value: 1 })"
                v-show="row.mute === 0"
                >禁言</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="toggoleState(row, { type: 5, value: 1 })"
                v-show="row.privateChat === 0"
                >禁止私聊</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="toggoleState(row, { type: 5, value: 0 })"
                v-show="row.privateChat === 1"
                >允许私聊</el-dropdown-item
              >
              <!-- <el-dropdown-item @click.native="onBand(row)"
                >{{ row.userStatus === 0 ? "封禁" : "解封" }}
              </el-dropdown-item>
              <el-dropdown-item @click.native="onDel({ userId: row.uid })"
                >销毁</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <the-page ref="page" @change="fetch" />
    <!-- <this-edit ref="edit" @edited="fetch" /> -->
    <this-add ref="add" @added="fetch" />
    <!-- <this-msg ref="msg" /> -->
    <!-- <this-users ref="users" /> -->
    <this-members ref="members" />
    <member-add ref="members_add" />
    <confirm-del ref="confirmDel" @on-del="onDel({ targetId: cur_row.gid })" />
    <!-- <user-list ref="users" /> -->
  </div>
</template>

<script>
import rowsCurl from "@/mixins/rows-curl";
// import thisEdit from "./edit.vue";
import thisAdd from "./add.vue";
// import thisMsg from "./msg.vue";
// import thisUsers from "./users.vue";
import thisMembers from "./member/index.vue";
import memberAdd from "./member/add.vue";
import thePage from "@/components/page.vue";
import thisSearch from "./search.vue";
import confirmDel from "./confirm-del.vue";

export default {
  components: {
    // thisEdit,
    thisAdd,
    thisSearch,
    thePage,
    // thisMsg,
    // thisUsers,
    thisMembers,
    confirmDel,
    memberAdd,
  },
  mixins: [rowsCurl],
  data() {
    return {
      uri: {
        list: "group/list",
        del: "/group/dismissGroup",
      },
      cur_row: null,
    };
  },
  computed: {},
  methods: {
    confirmDel(row) {
      this.cur_row = row;
      this.$refs.confirmDel.open();
    },
    toggoleState(row, state) {
      this.axios
        .post("/group/modifyGroupInfo", {
          owner: row.owner,
          targetId: row.gid,
          ...state,
        })
        .then((res) => {
          if (res.retCode != 0) {
            return this.$message.error(res.retMsg);
          }
          this.fetch(1);
          this.$message.success("操作成功!");
          // this.loading = false;
        });
    },
    showMembers(row) {
      this.$refs.members.open(row, "group/users");
    },
    onBand(row) {
      const status = row.userStatus === 0 ? 2 : 0;
      this.axios
        .post("/user/updateUserStatus", {
          status,
          userId: row.uid,
        })
        .then((res) => {
          if (res.retCode != 0) {
            return this.$message.error(res.retMsg);
          }
          this.fetch(1);
          this.$message.success("操作成功!");
          // this.loading = false;
        });
    },

    sendMsg(row) {
      this.$refs.msg.open(row);
    },
    viewMsg(row) {
      this.$router.push({
        path: "/message/list",
        query: { targetId: row.gid, name: row.name },
      });
    },
    addMembers(row) {
      this.$refs.members_add.open(row, "user/list");
    },
  },
};
</script>

<style>
</style>